<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>重放</title>
</head>
<body>
    <button id="reply">播放录像</button>
</body>
<script>
    const Hero = {
        attack() {
            console.log('攻击');
        },
        defense() {
            console.log('防御');
        },
        jump() {
            console.log('跳跃');
        },
        crouch() {
            console.log('蹲下');
        }
    }

    const makeCommand = (receiver, state) => {
        return receiver[state] 
            ? () => receiver[state]()
            : null;
    }

    let commands = {
        'W': 'jump',
        'S': 'crouch',
        'A': 'defense',
        'D': 'attack'
    }

    let commandStack = []; // 保存命令的堆栈

    document.onkeypress = (event) => {
        let key = event.key.toUpperCase();
        let command = makeCommand(Hero, commands[key]);

        if (command) {
            command();
            commandStack.push(command); // 将刚刚执行过的命令保存进堆栈
        }
    }

    document.getElementById('reply').onclick = () => {
        let command;
        while(command = commandStack.shift()) {
            command();
        }
    }
</script>
</html>